<template>
	<view class="columnbox wdh-100 content">
		<!-- <view class="rowbox top-box">
            <view @click="peisong='2'" :class="{'sel-top-box':peisong=='2'}" class="columnbox"
                style="width: 50%;position: relative;">
                <view style="position: relative;z-index: 2;">快递</view>
                <template v-if="peisong=='2'">
                    <view class="circle-boxl">
                        <view></view>
                    </view>
                </template>
            </view>
            <view :class="{'sel-top-box':peisong=='1'}" @click="peisong='1'" class="columnbox"
                style="width: 50%;position: relative;">
                <view style="position: relative;z-index: 2;">自提</view>
                <template v-if="peisong=='1'">
                    <view class="circle-box">
                        <view></view>
                    </view>
                </template>
            </view>
        </view> -->
		<!-- <view class="rowbox peisong-info" v-if="peisong=='2'">
			<view @click="peisong=item.value" class="rowbox p-box" :class="{'p-sel-box':item.value==peisong}"
				v-for="(item,index) in peisongList" :key='index'>
				<view>{{item.title}}</view>
			</view>
		</view> -->
		<!-- <view class="info-box top-box-info">
			<view class="columnbox wdh-100 als">
				<view style="font-weight: bold;">药店名称：{{prescription.pharmacyname}} </view>
				<view class="wdh-100 yd-addr">
					药店地址：{{prescription.pharmacyarea}}
				</view>
			</view>
		</view> -->
		<view class="info-box top-box-info" v-if="peisong=='2'">
			<!-- 	<template v-if="peisong=='2'">
				<view @click="addAddress" v-if="address==''" class="rowbox wdh-100 spb" style="padding: 32rpx 0;">
					<view style="font-weight: bold;">请添加收货地址</view>
					<u-icon name="arrow-right" size="28rpx"></u-icon>
				</view>
				<view @click="addAddress" v-else class="rowbox wdh-100 spb">
					<view class="columnbox als" style="width: 500rpx;">
						<view style="font-weight: bold;">{{address.name}} {{address.phone}}</view>
						<view class="wdh-100 yd-addr">
							{{address.province}}{{address.city}}{{address.county}}{{address.area}}
						</view>
					</view>
					<u-icon name="arrow-right" size="28rpx"></u-icon>
				</view>

			</template> -->
			<view @click="addAddress" v-if="address==''" class="rowbox wdh-100 spb" style="padding: 32rpx 0;">
				<view style="font-weight: bold;">请添加收货地址</view>
				<u-icon name="arrow-right" size="28rpx"></u-icon>
			</view>
			<view @click="addAddress" v-else class="rowbox wdh-100 spb">
				<view class="columnbox als" style="width: 500rpx;">
					<view style="font-weight: bold;">{{address.name}} {{address.phone}}</view>
					<view class="wdh-100 yd-addr">
						{{address.province}}{{address.city}}{{address.county}}{{address.area}}
					</view>
				</view>
				<u-icon name="arrow-right" size="28rpx"></u-icon>
			</view>
			<view class="one-info rowbox spb addr-notice" v-if="peisong=='2'">
				快递发货
				<view class="rowbox" style="color: #fd993d;">全国配送 <u-icon name="arrow-right" size="24rpx"
						color="#fd993d;"></u-icon> </view>
			</view>
		</view>
		<view class="columnbox info-box" v-if="type=='zhongyao'">
			<view class="one-info rowbox jus shop-box" v-if="type=='zhongyao'">
				<image :src="pharmacyharmacy.logo" mode="aspectFill"></image>
				<view class="columnbox als">
					<view>{{prescription.pharmacyname}}</view>
					<view class="shop-addr"> {{prescription.pharmacyarea}}</view>
				</view>
			</view>
			<!-- 中药 -->
			<template v-if="type=='zhongyao'">
				<view class="one-info rowbox spb">
					{{prescription.title}}
					<view>共 {{prescription.ji}} 剂</view>
				</view>
				<view class="one-info rowbox spb">
					配送方式
					<view>{{peisong=='1'?'到店自取':'快递发货'}}</view>
				</view>
				<!-- <view class="rowbox wdh-100" style="justify-content: flex-end;margin-top: 32rpx; ">
					<view>共{{prescription.ji}}剂，小计 ¥ <text
							style="font-weight: bold;font-size: 30rpx;margin-left: 4rpx;">{{zyprice}}</text>
					</view>
				</view> -->
			</template>
		</view>
		<!-- 西药 -->
		<template v-else>
			<view class="columnbox info-box" style="padding-top: 20rpx;" v-for="(item,index) in prescriptiondrug"
				:key='index'>
				<view class="columnbox wdh-100 xy-box">
					<!-- <view class="rowbox wdh-100 spb"
						style="margin-bottom: 20rpx;border-bottom: #faf9fa solid 1px;padding-bottom: 20rpx;">
						<view class="rowbox als">
							<image style="width: 40rpx;height: 40rpx;border-radius: 100rpx;" :src="item.pharmacylogo"
								mode="aspectFill">
							</image>
							<view class="columnbox als" style="width: 500rpx;">
								<view style="font-size: 24rpx;color: #121212;margin-left: 20rpx;">
									{{item.pharmacyname}}
								</view>
								<view style="font-size: 24rpx;color: #242424;margin-left: 20rpx;">
									{{item.pharmacyname}}
								</view>
							</view>
						</view>
					</view> -->
					<view class="one-info rowbox jus shop-box als" style="margin-bottom: 20rpx;">
						<image :src="item.pharmacylogo" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
						<view class="columnbox als">
							<view>{{item.pharmacyname}}</view>
							<view class="shop-addr"> {{item.pharmacyarea}}</view>
						</view>
					</view>
					<view class="rowbox wdh-100 jus  als">
						<image :src="item.image==''?'/static/logo.png':item.image" mode="aspectFill" class="xy-img">
						</image>
						<view class="columnbox xy-detail als">
							<view class="xy-name">{{item.medicine}}</view>
							<view class="xy-guige">{{item.guige}}</view>
							<view class="xy-price rowbox wdh-100 spb ">
								<view></view>
								<!-- 	<view class="price-num" style="font-weight: bold;"> ¥ <text>{{item.price.toFixed(2)}}</text>
									</view> -->
								<view>x {{item.num}}{{item.kynuit}}</view>
							</view>
						</view>
					</view>
					<view class="one-info rowbox spb addr-notice"
						style="border-bottom: #faf9fa solid 1px;border-top: none;padding-bottom: 20rpx;">
						配送方式
						<view class="rowbox">
							{{item.peisong?'快递':'自提'}}
							<switch @change="peisongXiyaoChange(item)" color="#00b6b2"
								style="transform: scale(.6);margin-right: -32rpx;" :checked="item.peisong"></switch>
						</view>
						<!-- <view>{{peisong=='1'?'到店自取':'快递发货'}}</view> -->
					</view>
				</view>
			</view>
		</template>


		<view class="columnbox info-box">
			<view class="one-info rowbox spb " style="margin-top: 0;">
				商品金额
				<view v-if="type=='zhongyao'" class="price-num">
					<view v-if="peisong=='2'">
						<text v-if="curfreight>zyprice">¥{{zyprice*1+ freight*1}}</text>
						<text v-else style="margin-left: 10rpx;"> ¥{{zyprice }}</text>
					</view>
					<view v-else>¥{{zyprice }}</view>
				</view>
				<view v-else class="price-num">
					<view v-if="peisong=='2'">
						<text v-if="curfreight>xyprice">¥{{xyprice*1+ freight*1}}</text>
						<text v-else style="margin-left: 10rpx;"> ¥{{xyprice }}</text>
					</view>
					<view v-else>¥{{xyprice }}</view>
				</view>
			</view>
			<view v-if="peisong=='2'" class="wdh-100 notice-title">*药品属于特殊商品，发货后概不退换！</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="rowbox wdh-100 spb bottom-box">
			<view>合计：<text class="price-num" style="font-weight: bold;">¥
					<text style="font-size: 32rpx;" v-if="type=='zhongyao'">
						<text v-if="curfreight>zyprice">{{totalPrice*1+ freight*1}}</text>
						<text v-else> {{totalPrice }}</text>
					</text>
					<text style="font-size: 32rpx;" v-else>
						<text v-if="peisong=='2'">
							<text v-if="curfreight>xyprice">{{xytotalPrice*1+ freight*1}}</text>
							<text v-else> {{xytotalPrice }}</text>
						</text>
						<text v-else>
							{{xytotalPrice}}
						</text>
					</text>
				</text></view>
			<view class="rowbox wdh-100 send-btn" style="width: 240rpx;" @click="toPay">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				id: 0,
				prescription: '',
				prescriptiondrug: '',
				pharmacyharmacy: '',
				peisong: '2', //1自提，2快递
				peisongList: [{
						title: '快递发货',
						value: '2'
					},
					// {
					// 	title: '到店自取',
					// 	value: '1'
					// },
				],
				address: '',
				ycPrice: 0,
				submitflag: false,
				freightList: [],
				curfreight: 0,
				freight: 0
			};
		},
		onLoad(options) {
			this.type = options.type
			this.id = options.id * 1
			this.getDetail()
			this.getFreight()
			if (this.type == 'xiyao') {
				this.peisongList = [{
					title: '快递发货',
					value: '2'
				}]
			}

		},
		onShow() {
			this.getDefaultAddress()
		},
		computed: {
			zyprice() {
				return (this.ycPrice * this.prescription.ji + this.prescription.zhenjin).toFixed(2)
			},
			xyprice() {
				return (this.ycPrice).toFixed(2)
			},
			totalPrice() {
				return (this.ycPrice * this.prescription.ji + this.prescription.zhenjin).toFixed(2)
			},
			xytotalPrice() {
				return (this.ycPrice).toFixed(2)
			},
		},
		methods: {
			peisongXiyaoChange(v) {
				v.peisong = !v.peisong
				for (var i = 0; i < this.prescriptiondrug.length; i++) {
					if (this.prescriptiondrug[i].peisong) {
						this.peisong = '2'
						break;
					} else {
						this.peisong = '1'
					}
				}
			},
			getFreight() {
				this.$req.post('/user/yunfei').then(res => {
					this.freightList = res.data.data
					this.curfreight = this.type == 'zhongyao' ? res.data.data[1].price * 1 : res.data.data[0]
						.price * 1,
						this.freight = res.data.data[2].price * 1
				})
			},
			getDefaultAddress() {
				this.$req.post('/user/areadefault', {
					uid: uni.getStorageSync('uid')
				}).then(res => {
					this.address = res.data.data.id == 0 ? '' : res.data.data
				})
			},

			toPay() {
				// if (this.peisong == '2' && this.address == '') {
				// 	uni.showToast({
				// 		title: '请添加收货地址',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				if (this.address == '') {
					uni.showToast({
						title: '请添加收货地址',
						icon: 'none'
					})
					return false
				}
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '加载中'
					})
					if (this.type == 'zhongyao') {
						this.$req.post('/user/wechatpayzyj', {
							prescriptionid: this.id,
							ziti: 1,
							addressid: this.address.id * 1,
							uid: uni.getStorageSync('uid')
						}).then(res => {
							this.submitflag = false
							uni.hideLoading()
							if (res.data.code == 0) {
								var info = JSON.parse(res.data.data)
								delete info.appId
								uni.requestPayment({
									provider: 'wxpay',
									...info,
									success: res => {
										uni.showToast({
											title: '支付成功',
											duration: 1000,
										})
										let pages = getCurrentPages(); //获取所有页面栈实例列表
										let nowPage = pages[pages.length - 1]; //当前页页面实例
										let prevPage = pages[pages.length - 2]; //上一页页面实例
										prevPage.$vm.refreshflag = true
										uni.navigateBack()
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									},
									complete() {
										this.submitflag = false
										uni.hideLoading()
									}
								});
							} else {
								uni.hideLoading()
								this.submitflag = false
								uni.showModal({
									title: '支付失败',
									content: res.data.msg
								})
							}
						})
					} else {
						let parameter = []
						this.prescriptiondrug.forEach(res => {
							parameter.push({
								prescriptionxypharmacyid: res.id * 1,
								ziti: res.peisong ? 1 : 2
							})
						})
						this.$req.post('/user/wechatpayxyj', {
							// prescriptionxyid: this.id,
							// // ziti: this.peisong == '2' ? 1 : 2,
							// uid: uni.getStorageSync('uid'),
							// addressid: this.address.id * 1
							prescriptionxyid: this.id,
							addressid: this.address.id * 1,
							uid: uni.getStorageSync('uid'),
							parameter: JSON.stringify(parameter)
						}).then(res => {
							if (res.data.code == 0) {
								var info = JSON.parse(res.data.data)
								delete info.appId
								uni.requestPayment({
									provider: 'wxpay',
									...info,
									success: res => {
										uni.showToast({
											title: '支付成功',
											duration: 1000,
										})
										let pages = getCurrentPages(); //获取所有页面栈实例列表
										let nowPage = pages[pages.length - 1]; //当前页页面实例
										let prevPage = pages[pages.length - 2]; //上一页页面实例
										prevPage.$vm.refreshflag = true
										uni.navigateBack()
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									},
									complete() {
										this.submitflag = false
										uni.hideLoading()
									}
								});
							} else {
								uni.hideLoading()
								this.submitflag = false
								uni.showModal({
									title: '支付失败',
									content: res.data.msg
								})
							}

						})
					}
				}
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/list'
				})
			},
			getDetail() {
				if (this.type == 'zhongyao') {
					this.$req.post('/doctor/prescriptioninfo', {
						id: this.id
					}).then(res => {
						this.prescription = res.data.data.prescription
						this.prescriptiondrug = res.data.data.prescriptiondrug
						this.pharmacyharmacy = res.data.data.pharmacyharmacy
						this.getPriceDetail()
					})
				} else {
					this.$req.post('/doctor/prescriptionxyinfo', {
						id: this.id
					}).then(res => {
						res.data.data.prescriptionxydrug.forEach(resp => {
							resp.peisong = true
						})
						this.prescription = res.data.data.prescriptionxy
						this.prescriptiondrug = res.data.data.prescriptionxydrug
						this.getPriceDetail()
					})
				}
			},
			getPriceDetail() {
				if (this.type == 'zhongyao') {
					let price = 0
					this.prescriptiondrug.forEach(v => {
						price += v.price * v.gram
					})
					this.ycPrice = price
					// let list = []
					// this.prescriptiondrug.forEach(v => {
					// 	list.push(v.chinesedrugid)
					// })
					// this.$req.post('/doctor/yaofangprice', {
					// 	chinesedrugids: list.join(',')
					// }).then(res => {
					// 	// let list = []
					// 	// this.prescriptiondrug.forEach(v => {
					// 	// 	for (var i = 0; i < res.data.data.length; i++) {
					// 	// 		if (v.chinesedrugid == res.data.data[i].id) {
					// 	// 			list.push(Object.assign({}, v, res.data.data[i]))
					// 	// 			break;
					// 	// 		}
					// 	// 	}
					// 	// })
					// 	// this.detailPriceList = list
					// 	// let price = 0
					// 	// this.prescriptiondrug.forEach(v => {
					// 	// 	price += v.price * v.gram
					// 	// })
					// 	// this.ycPrice = price
					// })
				} else {
					let price = 0
					this.prescriptiondrug.forEach(v => {
						price += v.price * v.num
					})
					this.ycPrice = price
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		font-size: 28rpx;
	}

	.info-box {
		width: 710rpx;
		background: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 32rpx 32rpx;
		font-size: 28rpx;
	}

	.one-info {
		width: 100%;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.dotted-box {
		border-bottom: #b2b4b7 dotted 1px;
		padding-bottom: 20rpx;
	}

	.top-box {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 710rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		overflow: hidden;
		color: #7d7d7d;

		.sel-top-box {
			background: #00e13d;
			height: 100rpx;
			color: #fff;
			font-weight: bold;
			border-radius: 20rpx;
		}

		.circle-box,
		.circle-boxl {
			background: #00e13d;
			position: absolute;

			bottom: 20rpx;
			width: 40rpx;
			height: 40rpx;

			view {
				background: #fff;
				width: 40rpx;
				height: 40rpx;
				border-radius: 0 0 20rpx 0;
			}
		}

		.circle-box {
			left: -40rpx;
		}

		.circle-boxl {
			right: -40rpx;

			view {
				border-radius: 0 0 0 20rpx;
			}
		}
	}

	.top-box-info {
		border-radius: 0 0 20rpx 20rpx;
		padding: 32rpx 32rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.yd-addr {
		color: #545454;
		margin-top: 10rpx;
	}

	.yd-map {
		margin-top: 10rpx;
	}

	.shop-box {
		padding-bottom: 20rpx;
		margin-top: 0;
		border-bottom: #eaf1f4 solid 1px;
		align-items: flex-start;
		font-weight: bold;

		image {
			margin-right: 20rpx;
			width: 82rpx;
			height: 82rpx;
			border-radius: 10rpx;
		}

		.shop-addr {
			font-weight: normal;
			margin-top: 10rpx;
			box-sizing: border-box;
			width: 520rpx;
			font-size: 24rpx;
		}
	}

	.peisong-info {
		margin-top: 20rpx;
		justify-content: flex-start;
		width: 710rpx;
		padding-left: 20rpx;
		box-sizing: border-box;

		.p-box {
			color: #535353;
			background: #fff;
			font-size: 32rpx;
			width: calc(50% + 20rpx);
			padding: 20rpx 0;
			border-radius: 40rpx 100rpx 0 0;
			margin-left: -20rpx;
			position: relative;
			z-index: 1;
		}

		.p-sel-box {
			background: #00b6b2;
			color: #fff;
			position: relative;
			z-index: 2;
		}
	}

	.addr-notice {
		border-top: #faf9fa solid 1px;
		padding-top: 20rpx;
	}

	.price-num {
		color: #ed0000;
	}

	.xy-box {
		margin-top: 20rpx;

		.xy-img {
			width: 120rpx;
			height: 120rpx;
		}

		.xy-detail {
			width: calc(100% - 140rpx);
			margin-left: 20rpx;
		}

		.xy-name {
			font-size: 28rpx;
		}

		.xy-guige {
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.xy-price {
			margin-top: 10rpx;
		}
	}

	.notice-title {
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #ffaa00;
	}
</style>